<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>1234</title>
</head>
<style>
    body {
        padding: 0;
        margin: 0;
    }

    #body {
        height: 100vh;
        display: block;
        background: #0f03;
    }

    #foot {
        height: 200px;
        display: block;
        background: rgba(102, 51, 153, 0.07);
    }

    #end {
        height: 100vh;
        display: block;
        background: #f0f3;
    }
</style>
<body>
<div id="body">

</div>
<div id="foot">

</div>
<div id="end">

</div>
<script>
    let color = [
        "#f80232",
        "#ffae00",
        "#f8f402",
        "#40f802",
        "#02f8cb",
        "#023bf8",
        "#bb02f8",
    ];
    let ci = 0;
    let io = new IntersectionObserver(function (entries) {
        if (entries[0].isIntersecting) {
            document.getElementById("foot").style.background = color[ci]
            console.log("我可以被看到了", entries)
        } else {
            console.log("我不可以被看到了", entries)
            ci = ++ci % color.length;
        }
    }, {
        threshold: 0.1
    })
    io.observe(document.getElementById("foot"))
</script>

<div id="page">
    <div class="logo"></div>
    <ul id="navigation">
        <li><a href="">Item 1</a></li>
        <li><a href="">Item 2</a></li>
        <li><a href="">Item 3</a></li>
        <li><a href="">Item 4</a></li>
        <li><a href="">Item 5</a></li>
    </ul>
</div>

</body>
</html>
